
import { useAppSelector } from '../../store/hooks';
import styles from './cart.module.scss';

export const Cart = () => {
	const {balls} = useAppSelector(state => state.cart);
	console.log('мячи из корзины', balls);
	return (
		<div className={styles.container}>
			{balls.length = 0 ? <p>Корзина пуста</p> : }
			
			<><div className={styles.ballsInCart}>
				<div className={styles.item}>
					<div className={styles.img_name}>
						<p className={styles.name}>{balls[0].name}</p>
						<img src={balls[0].image} width={150} height={150}/>
					</div>
					<div className={styles.price_count}>
						<p>Стоимость: {balls[0].price} р.</p>
						<div className={styles.count}>
							<button className={styles.increment}>+</button>
							<p>Количество: {balls[0].count}</p>
							<button className={styles.decrement}>-</button>
						</div>
					</div>
					
				</div>
			</div>
			<div className={styles.total}>Блок стоимости общей цены</div>
			</>
		</div>
	);
};